<!--
  *@Description : 动态的个人信息栏
  *@author 萧红
  * 必传字段为以下数据
    info: {name: "萌萌哒少女", sex: 0, time: "2020-03-24 21:27",…}
    1.img: "https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3917532533,163531716&fm=26&gp=0.jpg" 图像url地址
    2.name: "萌萌哒少女" 昵称
    3 sex: 0 性别 0女，1男
    4 time: 2020-03-24 21:27 评论发布的时间
    5 userId: 用户的id好  单击图像跳到用户首页
  *@date 2020-03-21 20:57
  *@LastEditTime 2020-03-21 20:57
  *@LastEdititors
-->
<template>
  <div class="info" @click="goUserDetail">
    <!--图像区域-->
    <div class="img">
      <img :src="info.img" alt="">
    </div>
    <!--名字性别,以及名字下面的区域-->
    <div class="name-date">
      <div>
        <span class="name">{{info.name}}</span>
        <span class="iconfont" :class="info.sex === 1 ? 'iconnanxing':'sex iconnvxing'"></span>
      </div>
      <!--姓名下面的区域-->
      <div class="under-name">
        <!--姓名下面默认显示日期-->
        <span v-if="underName==='date'">{{info.time}}</span>
        <span v-if="underName==='sign'">{{info.sign}}</span>
        <!--日期后面的插槽-->
        <slot name="date-append"></slot>
      </div>
      <!-- 评论显示插槽-->
      <slot name="pinlun"></slot>
    </div>
    <!--下拉按钮-->
    <div class="under-btn" @click.stop="showAction" v-if="showUnderBtn">
      <i class="cubeic-select"></i>
    </div>
    <!--关注按钮-->
    <div class="guanzhu-btn" @click.stop="guanZhuChange " v-if="showGuanZhuBtn">
      {{gzContent}}
    </div>
    <!--删除按钮-->
    <div class="del-btn" v-if="isSelfPinlun">
      删除按钮
    </div>
  </div>
</template>

<script>
export default {
  name: 'info',
  props: {
    info: {
      type: Object,
      default: () => {},
      required: true
    },
    showUnderBtn: {
      type: Boolean | Number,
      default: 1
    },
    showGuanZhuBtn: {
      type: Boolean | Number,
      default: 0
    },
    inGuanZhu: {
      type: Number | Boolean,
      default: 0
    },
    // underName 的值控制姓名下面显示的是时间，还是签名。或者自己在扩展。
    underName: {
      type: String,
      default: 'date' // date 显示发布时间，sign显示的是签名，默认为发布时间
    }
  },
  data () {
    return {
      gzContent: '关注',
      isSelfPinlun: false // 是否是自己的评论
    }
  },
  watch: {
    inGuanZhu (value) {
      this.gzContent = value ? '取消关注' : '关注'
    }
  },
  mounted () {
    // console.log(this.info)
    // 适配不同组件调用info，因为有的组件用的user_id,有的调用时传参是userId,
    // info 组件使用的是user_id，如果传入的info数据里面使用的是userId，那么就将user_id = userId
    this.info.user_id = !this.info.user_id ? this.info.userId : this.info.user_id
    this.isSelfPinlun = this.info.user_id === localStorage.getItem('userId')
    this.gzContent = this.inGuanZhu ? '取消关注' : '关注'
  },
  methods: {
    showAction () {
      this.$createActionSheet({
        data: [
          {
            content: this.gzContent,
            class: 'foo'
          },
          {
            content: '将TA拉黑',
            class: 'foo'
          },
          {
            content: '举报',
            class: 'foo'
          }
        ],
        onSelect: (item, index) => {
          switch (index) {
            case 0: this.guanZhuChange(); break
            case 1: this.laHei(); break
            case 2: break
          }
        }
      }).show()
    },
    // 关注用户， 取消关注调用的方法
    guanZhuChange () {
      let params = {
        userId: parseInt(localStorage.getItem('userId')),
        gzuserId: this.info.user_id
      }
      if (params.userId === params.gzuserId) {
        this.$toast('您不能关注您自己哦(*^▽^*)')
        return false
      }
      if (this.inGuanZhu) {
        // 已关注就要取消关注
        this.apis.cancelGuanZhu(params).then(res => {
          if (res.code === 200) {
            this.$toast('取消关注成功', 'correct', 1000)
            this.$emit('changeInGuanZhu', 0)
          }
        })
      } else {
        // 未关注就要关注
        this.apis.addGuanZhu(params).then(res => {
          if (res.code === 200) {
            this.$toast('关注成功', 'correct', 1000)
            this.$emit('changeInGuanZhu', 1)
          }
        })
      }
    },
    goUserDetail () {
      this.$router.push({path: '/userDetail', query: {userId: this.info.user_id}})
    }
  }
}
</script>

<style scoped lang="stylus">
@import "../../node_modules/stylus-px2rem"
  .info
  {
    width: 100%
    display flex
    padding 2px;
    position relative
    align-items: center;
    .img{
      align-self  flex-start
      width 22px
      height: 22px
      img{
        width: 100%
        height: 100%
        border-radius 50%;
      }
    }
    .name-date
    {
      margin 0px 5px
      div
      {
        text-align left;
        height:12px;
        line-height 12px;
      }
      .under-name
      {
        width 82px;
        display inline-block
        overflow hidden
        text-overflow ellipsis
        white-space nowrap
      }
      .name {margin-right:5px;color:black;font-weight bolder}
      .sex{color:#ff74a3}
      .pinlun-content
      {
        color: black
        font-weight: bolder;
        font-size:6px
      }
    }
    .under-btn{
      height 25px;
      line-height 25px
      position absolute
      right:10px;
      i
      {
        font-size:10px
      }
    }
    .guanzhu-btn
    {
      width 40px
      line-height 12px;
      position absolute
      border 1px solid deeppink
      right:10px;
      color:deeppink
      border-radius 2px
      top: 50%
      transform translateY(-50%)
    }
  }
</style>
